<template>
    <div class="radar">
        <h3>雷达拼图/卫星云图</h3>
        <div class="mapBox">
            <div class="map1" id="mapContainer1"></div>
            <div class="map2">
                <iframe style="width:100%;height:100%;" src="http://localhost:8080/#/Monitormap2" frameborder="0"></iframe>
            </div>
        </div>
    </div>
</template>

<script>
const center = [120.6, 27.83];
// import map2 from './radar/map2'
export default {
    components:{
        // map2
    },
    data(){
        return{
            map:'',
            imagelayer:'',
            radarDS:[],
        }
    },
    methods:{
        mapRender() {
            let that = this
            this.map = QXMap.Map("mapContainer1", {
              center: center,
              zoom: 7,
              maptype: QMAP_NORMAL_MAP
            });
            const areaCode = "330300000";
            var option = {
              isshowname: false,
              weight: 2,
              fillOpacity: 0,
              fillColor: "#fff",
              opacity: 1,
              color: "red",
              linestyle: "solid" //dot
            };
            console.log(QXMap)
            QXMap.RegionLayer(areaCode, option, function(regionLayer) {
              that.map.addVectorLayer(regionLayer);
              that.radarRender()
            });
        },
        radarRender(){
            let timeArr = ['20200406150000','20200406160000'];
            var imageProductOptions = {
              productcategory: "RADA_L3_MST_HREF_PNG",
              begintime: timeArr[0],
              endtime: timeArr[1],
              limit: 1
            };
            let that = this;
            var products = QXMap.GetImageProductList(imageProductOptions, data => {
                console.log(data)
              that.radarDS = data.DS.reverse();
              let curUrl;
                curUrl = data.DS[0].Url;
              if (data.RetrunCode == 0) {
                var imagelayer = QXMap.addImageProduct({
                  nlat: 40.2,
                  slat: 20.2,
                  wlng: 110,
                  elng: 130,
                  opacity: 0.8,
                  type: data.DS[0].Type,
                  url: curUrl
                });
                that.imagelayer = imagelayer;
                that.map.addTileLayer(that.imagelayer);
              } else {
                that.$message({
                  message: "请求失败",
                  type: "warning",
                  duration: 1000
                });
              }
            });
        }
    },
    mounted(){
        this.mapRender()
    }
}
</script>
<style>
    span[title="平台贡献者：杨明"]{
        display:none;
    }
</style>
<style lang="scss" scoped>
    .radar{
        width:100%;
        height:100%;
        display:flex;
        flex-direction: column;
        h3{
            line-height:2.4rem;
            letter-spacing: .2rem;
            font-size:1.3rem;
            text-align:right;
            height:2.4rem;
            margin:.7rem 1.5rem 0 0;
        }
        .mapBox{
            flex:1;
            padding:1rem;
            display:flex;
            &>div{
                flex:1;
                border:1px solid #086FA4;
            }
            .map1{
                margin-right:1rem;
            }
        }
    }
</style>